<template>
  <div class="task-status-test">
    <h1>任务状态和操作测试</h1>
    
    <div class="test-sections">
      <!-- 时间格式测试 -->
      <div class="test-section">
        <h2>时间格式测试</h2>
        <div class="task-time">
          2025-04-23 到 2025-05-23
        </div>
      </div>
      
      <!-- 状态进度测试 -->
      <div class="test-section">
        <h2>状态进度测试</h2>
        <div v-for="status in testStatuses" :key="status.key" class="status-test-item">
          <h3>{{ status.name }}</h3>
          <div class="status-progress-container">
            <!-- 创建阶段 -->
            <div class="status-step">
              <img
                :src="getStepIcon('created', status.key)"
                class="step-icon"
                alt="创建"
              />
              <span
                class="step-text"
                :style="{ color: getStepColor('created', status.key) }"
              >
                创建
              </span>
            </div>
            
            <!-- 箭头 -->
            <div class="step-arrow">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M6 4L10 8L6 12" stroke="#E4E7ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            
            <!-- 批改阶段 -->
            <div class="status-step">
              <img
                :src="getStepIcon('grading', status.key)"
                class="step-icon"
                alt="批改"
              />
              <span
                class="step-text"
                :style="{ color: getStepColor('grading', status.key) }"
              >
                {{ getGradingStepText(status.key) }}
              </span>
            </div>
            
            <!-- 箭头 -->
            <div class="step-arrow">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M6 4L10 8L6 12" stroke="#E4E7ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            
            <!-- 订正阶段 -->
            <div class="status-step">
              <img
                :src="getStepIcon('correction', status.key)"
                class="step-icon"
                alt="订正"
              />
              <span
                class="step-text"
                :style="{ color: getStepColor('correction', status.key) }"
              >
                {{ getCorrectionStepText(status.key) }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作链接测试 -->
      <div class="test-section">
        <h2>操作链接测试</h2>
        <div class="action-links">
          <span class="action-link" @click="handleAction('detail')">详情</span>
          <span class="action-separator">|</span>
          <span class="action-link" @click="handleAction('edit')">去批改</span>
          <span class="action-separator">|</span>
          <el-dropdown @command="handleAction">
            <span class="action-link more-actions">
              ···
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="copy">复制</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import completeIcon from '@/assets/complete.png'
import pendingIcon from '@/assets/pending.png'

// 测试状态数据
const testStatuses = [
  { key: 'created', name: '创建状态' },
  { key: 'pending', name: '待批改状态' },
  { key: 'grading', name: '批改中状态' },
  { key: 'correction', name: '待订正状态' },
  { key: 'correcting', name: '订正中状态' },
  { key: 'completed', name: '已完成状态' }
]

// 获取步骤图标
const getStepIcon = (step: string, currentStatus: string): string => {
  const isCompleted = isStepCompleted(step, currentStatus)
  const isActive = isStepActive(step, currentStatus)
  
  if (isCompleted || isActive) {
    return completeIcon
  } else {
    return pendingIcon
  }
}

// 获取步骤颜色
const getStepColor = (step: string, currentStatus: string): string => {
  const isCompleted = isStepCompleted(step, currentStatus)
  const isActive = isStepActive(step, currentStatus)
  
  if (isCompleted) {
    return '#67C23A'  // 绿色 - 已完成
  } else if (isActive) {
    return '#409EFF'  // 蓝色 - 进行中
  } else {
    return '#909399'  // 灰色 - 未开始
  }
}

// 判断步骤是否已完成
const isStepCompleted = (step: string, currentStatus: string): boolean => {
  switch (step) {
    case 'created':
      return ['pending', 'grading', 'correction', 'correcting', 'completed'].includes(currentStatus)
    case 'grading':
      return ['correction', 'correcting', 'completed'].includes(currentStatus)
    case 'correction':
      return currentStatus === 'completed'
    default:
      return false
  }
}

// 判断步骤是否正在进行
const isStepActive = (step: string, currentStatus: string): boolean => {
  switch (step) {
    case 'created':
      return currentStatus === 'created'
    case 'grading':
      return ['pending', 'grading'].includes(currentStatus)
    case 'correction':
      return ['correction', 'correcting'].includes(currentStatus)
    default:
      return false
  }
}

// 获取批改阶段文本
const getGradingStepText = (status: string): string => {
  switch (status) {
    case 'pending':
      return '待批改'
    case 'grading':
      return '批改中'
    case 'correction':
    case 'correcting':
    case 'completed':
      return '批改完成'
    default:
      return '批改完成'
  }
}

// 获取订正阶段文本
const getCorrectionStepText = (status: string): string => {
  switch (status) {
    case 'correction':
      return '待订正'
    case 'correcting':
      return '订正中'
    case 'completed':
      return '已完成'
    default:
      return '待订正'
  }
}

// 处理操作点击
const handleAction = (action: string) => {
  console.log('点击操作:', action)
}
</script>

<style scoped>
.task-status-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.test-section {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-section h2 {
  margin-bottom: 20px;
  color: #333;
}

.status-test-item {
  margin-bottom: 20px;
}

.status-test-item h3 {
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

/* 任务时间 */
.task-time {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
  white-space: nowrap;
}

/* 三段式状态进度容器 */
.status-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  justify-content: center;
  min-width: 260px;
  width: fit-content;
}

.status-step {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.step-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.step-text {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.step-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 操作链接样式 */
.action-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.action-link {
  color: #409EFF;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s;
}

.action-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.action-separator {
  color: #dcdfe6;
  font-size: 14px;
  margin: 0 4px;
}

.more-actions {
  font-weight: bold;
  letter-spacing: 1px;
}
</style>
